<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
  </head>

  <body>
    <div id="app">
      <!-- 注册后在注册的页面使用 -->
      <App></App>

      <Heads></Heads>
    </div>
    <script>
      Vue.config.productionTip = false
      //   vue中提供extend创建组件
      //   创建的组件需要在其父级组件中使用components注册
      //   extend可以被忽略,直接再检测时会由vue使用extend创建构造函数然后执行创建实例然后挂载到页面中去
      const App = {
        name: 'App',
        // 创建组件
        template: '<div> <Heads/><h1>Apps</h1></div>',
      }
      const Heads = {
        name: 'Head',
        // 创建组件
        template: '<div> <h1>Head</h1></div>',
      }
      //   全局创建在任意地方都可以使用
      Vue.component('Heads', Heads)
      const vm = new Vue({
        el: '#app',
        data() {
          return {}
        },
        // 注册
        //
        // vue中的组件,虽然都是对象但是他的实例对象的原型的原型指向并不是object的原型,而是VUE的原型,因为在创建组件时,使用的extend会
        // 将组件以继承的方式创建出来,所以this的指向会直接指向vue的实例,这样可以使得重复的方法挂载在vue中而不是组件实例中,有效减小重量
        components: {
          App,
        },
      })
    </script>
  </body>
</html>
